<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <!-- コンテナをロード -->
  <script type="text/javascript" src="../src/container.js" ></script>
  <script type="text/javascript">

// モデル兼コントローラ
function Kitten( ) {
  this.state = "stop";
  this.listeners = [];
}
Kitten.prototype = {
  run:  function() {
    this.setState("running");
  },
  stop: function() {
    this.setState("stop");
  },
  jump: function() {
    this.setState("jump!");
  },
  // 状態を変更する。
  setState: function( state ) {
    this.state = state;
    // 変更したらリスナに通知。
    for ( var i = 0; i < this.listeners.length; i++ ) {
      this.listeners[i].call( null, state );
    }
  }
}

// 猫の状態表示UI
function KittenStateView( elmId ) {
  this.elmId = elmId;
}
KittenStateView.prototype = {
  // 状態が変わったらUIを更新する。
  onKittenStateChanged : function( newState ) {
    document.getElementById( this.elmId ).innerHTML = newState;
  }
}

// コンテナ
var c = new container.Container( function( binder ) {

  // 猫
  binder.bind( Kitten ).to( "mii" ).inject( {
    // リスナとして"onKittenStateChanged"の名を持つコンポーネントを設定。
    "listeners": container.components( "onKittenStateChanged" )
  } );

  // コンポーネントを登録
  binder.bind( KittenStateView ).to( "view1").inject( { elmId: "view1" } );
  binder.bind( KittenStateView ).to( "view2").inject( { elmId: "view2" } );
  binder.bind( KittenStateView ).to( "view3").inject( { elmId: "view3" } );

  // バインドメソッドを登録
  binder.bindMethod( "view1", "onKittenStateChanged" ).to( "onKittenStateChanged" );
  binder.bindMethod( "view2", "onKittenStateChanged" ).to( "onKittenStateChanged" );
  binder.bindMethod( "view3", "onKittenStateChanged" ).to( "onKittenStateChanged" );
});

var mii = c.get("mii");

  </script>
</head>
<body>
  <div id="menubar">
    <a href="javascript:mii.run();">run</a>
    <a href="javascript:mii.jump();">jump</a>
    <a href="javascript:mii.stop();">stop</a>
  </div>
  <div id="view1"></div>
  <div id="view2"></div>
  <div id="view3"></div>
</body>
</html>